<template>
  <div class="home">
    <!-- 左边导航栏 -->
    <div class="selectItem" :style="{left:nums}">  
      <div class="itemlist mx-3">
        <div class="my-3 d-f d-ai-center d-jc-center">后台管理界面</div>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item :title="item.title" :name="Number(i) + 1" v-for="(item,i) in pathlist" :key="i">
            <div class="py-3 d-f d-ai-center list" @click="$router.push(items.path)" v-for="items in item.page" :key="items.name"><i class="el-icon-s-home"></i><span class="px-3">{{items.name}}</span></div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <!-- 顶部展示栏 -->
    <div class="selectTop p-3 d-f d-jc-between d-ai-center" :style="{width: num}">
        <div class="px-2 fs-md" @click="showtugger"><i class="el-icon-finished"></i></div>
        <div class="px-2 d-f d-ai-center">
          <img src="../assets/logo.png" alt="">
          <span class="pr-5 fs-sm">管理员</span>
        </div>
    </div>

    <!-- 展示页页面内容区域 -->
    <div class="selectContent" :style="{width: num}">
      <router-view :key="$route.path"></router-view>
    </div>
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
import { getuser,postuser } from "../api/user"
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name:'ArticleList'
})
export default class extends Vue {
  pathlist = [ //左侧导航栏目录列表
    { title:'首页  firsthome', page:[{name:'首页',path:'/content'}] },
    { title:'内容管理  content',page:[{name:'内容列表',path:'/contentlist'},{ name:'内容创建',path:'/contentedit' }] },
    { title:'首页管理  types',page:[{name:'轮播图',path:'/typelist'},{ name:'轮播图创建',path:'/typeedit' }] },
    { title:'弹窗管理  popup',page:[{name:'各类弹窗',path:'/typelist'},{ name:'弹窗使用说明',path:'/typeedit' }] }
  ]
  activeNames = 0
  nums: any = 0 //控制侧边栏的left
  num: any = '85%' //控制顶部导航的长度
  numstype = false //控制属性
  private showtugger(){ //隐藏侧边栏事件
    this.numstype = !this.numstype
    if(this.numstype){
      this.nums = '-15%'
      this.num = '100%'
    }else{
      this.num = '85%'
      this.nums = 0
    }
  }
  
  private async fetchpost(){
    // const res = await postuser({
    //   username: 'gyh',
    //   password: '123123'
    // })
    // console.log(res.data)
  }

  private async fetch(){
    const res = await getuser()
    console.log(res.data)
  }

  private handleChange(){  //左边侧边栏点击事件
    console.log('123')
  }
  created(){
    // this.fetchpost()
    // this.fetch()
  }
}
</script>

<style lang="scss">
  .el-collapse-item__content{
    padding-bottom: 0;
  }
  .selectItem{
    position: absolute;
    width: 15%;
    height: 100%;
    border-right: 1px solid #ccc;
    transition: .5s;
    .list{
      cursor: pointer;
      border-bottom: 1px solid #ccc;
    }
  }
  .selectTop{
    position: absolute;
    top: 0;
    right: 0;
    height: 60px;
    transition: 0.5s;
    border-bottom: 1px solid #ccc;
    div{
      cursor: pointer;
      img{
        width: 30px;
        height: 30px;
        border-right: 50%;
      }
    }
  }
  .selectContent{
    position: absolute;
    top: 60px;
    right: 0px;
    transition: 0.5s;
    height: auto;
  }
</style>
